/** ios 滑动菜单 begin**/
.swipe-menu{
    /** 开启3d加速 **/
    -webkit-transform:translateZ(0);
    transform : translateZ(0);

    /** 实际动画 **/
    -webkit-transition : -webkit-transform 0.4s  ease-in-out ;
    transition : transform  0.4s ease-in-out;

    /** ios菜单设置 **/
    position: relative;
    overflow : hidden;
    z-index: 2;
    background: #ffffff;
}

.swipe-menu-left{
    -webkit-transform : translate(-120px);
    transform  : translate(-120px);
}

.swipe-menu-right{
    -webkit-transform : translate(0);
    transfrom : translate(0);
}

/** ios 菜单样式 **/
.menu-list{
    position: absolute;
    right: 0px;
    top : 0;
    font-size: 0;
    overflow: hidden;
    z-index: 1;
}
.menu-list > .menu-btn{
    font-size: 1.6rem;
    color: #ffffff;
    width: 60px;
    height: 62px;
    line-height: 60px;
    text-align: center;
}
.menu-btn.remove{
    background: wheat;
}
.menu-btn.more{
    background: #d1d1d1;
}
/** IOS 滑动菜单 end**/





/** 抖动 **/

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

/** 抖动 **/
/*
 * 保护色css类
 * sherlock
 * 2014/3/25 周二
 */

.bg-navy {
  background-color: #001f3f; }

.bg-blue {
  background-color: #0074d9; }

.bg-aqua {
  background-color: #7fdbff; }

.bg-teal {
  background-color: #39cccc; }

.bg-olive {
  background-color: #3d9970; }

.bg-green {
  background-color: #2ecc40; }

.bg-lime {
  background-color: #01ff70; }

.bg-yellow {
  background-color: #ffdc00; }

.bg-orange {
  background-color: #ff851b; }

.bg-red {
  background-color: #ff4136; }

.bg-fuchsia {
  background-color: #f012be; }

.bg-purple {
  background-color: #b10dc9; }

.bg-maroon {
  background-color: #85144b; }

.bg-white {
  background-color: white; }

.bg-gray {
  background-color: #aaaaaa; }

.bg-silver {
  background-color: #dddddd; }

.bg-black {
  background-color: #111111; }

/* Colors */
.navy {
  color: #001f3f; }

.blue {
  color: #0074d9; }

.aqua {
  color: #7fdbff; }

.teal {
  color: #39cccc; }

.olive {
  color: #3d9970; }

.green {
  color: #2ecc40; }

.lime {
  color: #01ff70; }

.yellow {
  color: #ffdc00; }

.orange {
  color: #ff851b; }

.red {
  color: #ff4136; }

.fuchsia {
  color: #f012be; }

.purple {
  color: #b10dc9; }

.maroon {
  color: #85144b; }

.white {
  color: white; }

.silver {
  color: #dddddd; }

.gray {
  color: #aaaaaa; }

.black {
  color: #111111; }

/* Prettier Links */
/*a {*/
  /*-webkit-transition: color 0.3s ease-in-out;*/
  /*transition: color 0.3s ease-in-out; }*/

/*a:link {*/
  /*color: #0074d9; }*/

/*a:visited {*/
  /*color: #b10dc9; }*/

/*a:hover {*/
  /*color: #7fdbff; }*/

/*a:active {*/
  /*color: #ff851b; }*/

/*
 * 常用css
 * sherlock
 * 2014/3/25 周二
 */

/* display */
.none{display:none;}
.inline{display:inline;}
.block{display:block;}
.inline-block{
    display:inline-block;
    vertical-align: middle;
    *display:inline; letter-spacing:0;
    *zoom:1;
}
.inline-block2{
    display:inline-block;
    vertical-align: middle;
    *display:inline; letter-spacing:0;
    *zoom:1;
    width:220px;
}


/* font-style */
.normal{font-weight:normal; font-style:normal;}
.bold{font-weight:bold;}
.italic{font-style:italic;}


/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;}


/* pre 换行*/
.pre-warp{
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

/* 浮动 */
.fl {
    float: left
}

.fr {
    float: right
}

/* 清除浮动需要在 浮动元素完成的下一个不浮动元素上加*/
.clearFix {
    clear: both;
}

/* 去除浮动另外一种方法 推荐()*/
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; visibility:hidden;}


/* white-space */
.nowrap{white-space:nowrap;}
/* word-wrap */
.bk{word-wrap:break-word;}

/* text-decoration */
.tdl{text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}


/* vertical-align */
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vb{vertical-align:bottom;}
.vt{vertical-align:top;}
.vn{vertical-align:-2px;}

/* position */
.rel{position:relative;}
.abs{position:absolute;}

/* cursor */
.poi{cursor:pointer;}
.def{cursor:default;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* visibility */
.vh{visibility:hidden;}
.vv{visibility:visible;}
/* zoom */
.z{*zoom:1;}



/* 无框文本框文本域 */
.bd_none{border:0; outline:none;}





/** 开启硬件加速(飞起) **/
.D3{
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/** 防止长按弹出菜单 **/
.nus{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

/* tap颜色清空 */
.ntp{
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/** 防止文本调整方向变化 **/
.tsd{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}


/** 响应图片 **/
.response-img{
    max-width: 100%;
    height: auto;
    display: block;
}

.tile-img{
    width: 100%;
    height: auto;
}










/*
 * 图形
 * sherlock
 * 2014/3/25 周二
 */


/** 三角形 **/
.triangle {
    display: inline-block;
    width: 8px; /** 三角形边长度 **/
    height: 8px; /** 三角形边长度 **/

    border-top-color: red; /** 三角形颜色 **/
    border-right-color: red; /** 三角形颜色 **/

    border-top-width: 3px; /** 设置三角形粗细 **/
    border-right-width: 3px; /** 设置三角形粗细 **/

    border-right-style: solid;
    border-top-style: solid;
}

.triangle-top {
    -webkit-transform: rotate(-45deg); /** 三角形度数 **/
}

.triangle-bottom {
    -webkit-transform: rotate(-225deg); /** 三角形度数 **/
}

.triangle-left {
    -webkit-transform: rotate(-135deg); /** 三角形度数 **/
}

.triangle-right {
    -webkit-transform: rotate(-315deg); /** 三角形度数 **/
}

/** 爆裂形状 begin**/

.burst-12 {
    background: #3079ed;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}

.burst-12:before, .burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}

.burst-12:before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}

.burst-12:after {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}

/** 爆裂形状 end**/

.diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}

.diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

/** 气泡窗口 begin **/

.talkbubble {
    width: 120px;
    height: 80px;
    background: #3079ed;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid #3079ed;
    border-bottom: 13px solid transparent;
}

/** 气泡窗口 end **/

/* 太极  begin */
.yin-yang {
    width: 96px;
    height: 48px;
    background: #ffffff;
    border-color: #000000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

.yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #ffffff;
    border: 18px solid #000000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

.yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000000;
    border: 18px solid #ffffff;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

/* 太极  end */



/* 心 begin*/
.heart {
    position: relative;
    width: 100px;
    height: 90px;
}

.heart:before, .heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
   -moz-border-radius : 50 px 50 px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform : rotate(- 45 deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
     -ms-transform-origin : 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

 .heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
     transform : rotate(45 deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin : 100% 100%;
    transform-origin: 100% 100%;
}

/* 心 end */
/*
 * 布局css类
 * sherlock
 * 2014/3/25 周二
 */



/*
 * 表格布局(可用作自适应布局)
 * IE8+ IE6/7(hack)
 */

/* 动态自适应example */
/* http://www.zhangxinxu.com/study/201201/display-table-cell-width-auto.html */

.tb{
    display: table;
}
.tb-cell{
    display: table-cell;
    *display:inline-block;

    /* hack 无内容的时候 右侧定位问题*/
    width:2000px; *width:auto; *zoom:1;

    /* 修复连续文字不换行问题*/
    white-space:normal;
    word-wrap: break-word;
    word-break: break-all;
}





/*
 * inline布局(代替浮动)
 */
.inline_box{font-size:1em; letter-spacing:-.25em;}
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{
    display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;
}
.inline_two, .float_two{width:49.9%;}
.inline_three, .float_three{width:33.333%;}
.inline_four, .float_four{width:24.9%;}
.inline_five, .float_five{width:19.9%;}
.inline_six, .float_six{width:16.6%;}
.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}


/*
 * 浮动布局(bug多)
 */
.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}


/*
 * Flex布局(移动端)
 * 子元素全部流动 按照设计的比例来进行
 * 子元素设置了 固定宽度, 按照总宽度－设计宽度  然后再按照比例来进行分配
 * 例如 :  子元素A : flex 1  子元素B : flex 3;   总宽度 : 1000px   则 A = 1/4 = 250PX  B = 3/4 = 750PX
 * 例如 :  子元素A : 200px;  子元素B : flex 2;   子元素C : flex 3  则 1000-200 = 800PX  A = 2/5 = 320px B = 3/5 = 480px;
 */

.flex{
    display: flex;          /** 新语法 **/
    display: -webkit-box;   /** 旧语法 **/
    display: -webkit-flex;  /** 新语法 **/
}

.flex-1{
    -webkit-box-flex:1;
    flex: 1;
}

.flex-2{
    -webkit-box-flex:2;
    flex: 2;
}

.flex-3{
    -webkit-box-flex:3;
    flex: 3;
}

.flex-4{
    -webkit-box-flex:4;
    flex: 4;
    box-flex: 4;
}
.flex-5{
    -webkit-box-flex:5;
    flex: 5;
    box-flex: 5;
}
.flex-6{
    -webkit-box-flex:6;
    flex: 6;
    box-flex: 6;
}
.flex-7{
    -webkit-box-flex:7;
    flex: 7;
    box-flex: 7;
}
.flex-8{
    -webkit-box-flex:8;
    flex: 8;
    box-flex: 8;
}
.flex-9{
    -webkit-box-flex:9;
    flex: 9;
    box-flex: 9;
}

/** 注意ie8+ **/


.list-inline-nopd{
    list-style: none;
    padding-left: 0;
}

.list-inline-nopd>li{
    display: inline-block;
}


/*
 * 列表水平排列
 * 通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。
 */
.list-inline{
    list-style: none;
    padding-left: 0;
}

.list-inline>li:first-child {
    padding-left: 0;
}

.list-inline>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}


/*
 * 无样式列表
 * 移除了默认的list-style样式和左侧外边距的一组元素
 */
.list-unstyled{
    list-style: none;
    padding-left:0;
}
/*
 * 位置模拟css类
 * sherlock
 * 2014/3/25 周二
 */

/* 水平垂直居中(webkit) */
.pos-center-css3 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}

/* 水平垂直居中(负外边距)*/
.pos-center-neg-outside {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: auto; /** 替换为负宽度一半 **/
    margin-top: auto; /** 替换为负高度等一半**/
}

/*水平垂直居中(设置宽高即可)*/
.pos-center-auto {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto; /** 自行设置 **/
    height: auto; /** 自行设置 **/
}

/* 单行文字水平居中 设置line-height 与 height 值一样即可 */

/* 块元素水平居中(需要设置宽度,block) */
/* div等标签 */
.block-center {
    margin: 0 auto;
}

/* 行内元素水平居中 inline/inline-block */
/* span等标签 */
.inline-center {
    text-align: center;
}

/* 表格垂直居中(IE8＋兼容)  */
.table-v-align {
    display: table-cell;
    vertical-align: middle;
}

/* 大小不定元素垂直居中(外层设置宽 高) */
/* 注意img元素 需要vertical-aligin :  middle*/
.v-align:after {
    display: inline-block;
    width: 0;
    height: 100%;
    content: "center";
    vertical-align: middle;
    overflow: hidden;
}

/* 绝对定位隐藏 */
.abs_out {
    position: absolute;
    left: -999em;
    top: -999em;
}

.abs_clip {
    position: absolute;
    clip: rect(0 0 0 0);
}
/*
 * 文本css类
 * sherlock
 * 2014/3/25 周二
 */

/* 显示一行  溢出显示... */
.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* 显示一行 截断显示 */
.text-clip {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}

/* 强制换行显示 */
/*  word-wrap 对于长英文无解*/
.text-wrap {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

/* 文字居中*/
.text-center {
    text-align: center;
}







/*
 * 属性值 css类
 * sherlock
 * 2014/3/25 周二
 */



/* height */
.h14{height:14px;}
.h16{height:16px;}
.h18{height:18px;}
.h20{height:20px;}
.h22{height:22px;}
.h24{height:24px;}
/* width */
/* fixed width value */
.w20{width:20px;}
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:280px;}
.w320{width:320px;}
.w360{width:360px;}
.w400{width:400px;}
.w460{width:460px;}
.w500{width:500px;}
.w600{width:600px;}
.w640{width:640px;}
.w700{width:700px;}
/* percent width value */
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}
/* line-height */
.lh14{line-height:14px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}
.lh24{line-height:24px;}
/* margin */
.m0{margin:0;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt35{margin-top: 35px;}

.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb35{margin-bottom: 35px}

/* margin negative */
.ml-1{margin-left:-1px;}
.mr-1{margin-right:-1px;}
.mt-1{margin-top:-1px;}
.mb-1{margin-bottom:-1px;}
.ml-3{margin-left:-3px;}
.mr-3{margin-right:-3px;}
.mt-3{margin-top:-3px;}
.mb-3{margin-bottom:-3px;}
.ml-20{margin-left:-20px;}
.mr-20{margin-right:-20px;}
.mt-20{margin-top:-20px;}
.mb-20{margin-bottom:-20px;}
/* padding */
.p0{padding:0;}
.p1{padding:1px;}
.pl1{padding-left:1px;}
.pt1{padding-top:1px;}
.pr1{padding-right:1px;}
.pb1{padding-bottom:1px;}
.p2{padding:2px;}
.pl2{padding-left:2px;}
.pt2{padding-top:2px;}
.pr2{padding-right:2px;}
.pb2{padding-bottom:2px;}
.pl5{padding-left:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
.pr5{padding-right:5px;}
.pb5{padding-bottom:5px;}
.p10{padding:10px;}
.pl10{padding-left:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bdc{border:1px solid #ccc;}
.blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;}
.btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;}
.bdd{border:1px solid #ddd;}
.bld{border-left:1px solid #ddd;}
.brd{border-right:1px solid #ddd;}
.btd{border-top:1px solid #ddd;}
.bbd{border-bottom:1px solid #ddd;}
.bde{border:1px solid #eee;}
.ble{border-left:1px solid #eee;}
.bre{border-right:1px solid #eee;}
.bte{border-top:1px solid #eee;}
.bbe{border-bottom:1px solid #eee;}
/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
/* safe color */
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.gc{color:#ccc;}
.wh{color:white;}
/* font-size */
.f0{font-size:0;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f22{font-size:22px;}
.f30{font-size: 30px;}


/* font-family */
.fa{font-family:Arial;}
.ft{font-family:Tahoma;}
.fv{font-family:Verdana;}
.fs{font-family:Simsun;}
.fl{font-family:'Lucida Console';}
.fw{font-family:'Microsoft Yahei';}


/* letter-spacing */
.lt-1{letter-spacing:-1px;}
.lt0{letter-spacing:0;}
.lt1{letter-spacing:1px;}


